/**
 * 转换歌词字符串为对象数组形式
 * @param {*} lyrics 歌词字符串
 * @returns
 */
function changeLyrics(lyrics) {
  let arr = lyrics.split('\n')
  return arr.map((item) => {
    let strs = item.split(']')
    let words = strs[1] // 每个时间段的歌词
    let strTimes = strs[0].substring(1).split(':')
    let time = +strTimes[0] * 60 + +strTimes[1] // 每段歌词对应的时间
    return {
      words,
      time
    }
  })
}
let lyricsData = changeLyrics(lrc) // 数据源

// 创建li元素
let ul = document.querySelector('.container ul')
function createLiElements() {
  let frag = document.createDocumentFragment() // 创建文档元素 优化dom渲染 节省开销
  lyricsData.forEach((item, index) => {
    let li = document.createElement('li')
    li.textContent = item.words
    frag.appendChild(li)
  })
  ul.appendChild(frag)
}
createLiElements()

let audio = document.querySelector('audio')
// 计算当前播放时间对应的歌词项
function findindex(data) {
  let currentTime = audio.currentTime
  for (let i = 0; i < data.length; i++) {
    if (data[i].time > currentTime) {
      return i - 1
    }
  }
  return data.length
}

// 设置歌词ul的偏移量
let containerHeight = document.querySelector('.container').clientHeight // 容器高度
let liHeight = document.querySelector('.container li').clientHeight // 单个li的高度

function setOffset() {
  let index = findindex(lyricsData)
  let offset = -(liHeight * index + liHeight / 2 - containerHeight / 2)
  if (offset > 0) {
    offset = 0
  }
  ul.style.transform = `translateY(${offset}px)`
  let active = document.querySelector('.container .active') // 获取active的li 并移除active类
  if (active) {
    active.classList.remove('active')
  }
  let li = ul.children[index]
  if (li) {
    li.classList.add('active')
  }
}
// 监听播放
audio.addEventListener('timeupdate', setOffset)
